<template>

    <div style="display: flex;flex-direction: column;justify-content: center">
        <div style="color:red;text-align: center">拍照上传航班信息</div>
        <van-uploader :after-read="afterRead"/>

        <img v-if="imgUrl" style="width: 80%;height: 50%;display: block;margin: 0 auto" :src="imgUrl">

        <van-cell-group style="margin-top: 10px">
            <van-field v-model="flyNumber" label="航班号" placeholder="航班号" />
            <van-field label="订票日期" placeholder="订票日期" :value="bookingDate" @click="show = true" />
        </van-cell-group>
        <van-calendar :min-date="minDate" :max-date="maxDate"  v-model="show" @confirm="onConfirm" />

        <van-button v-show="isLogin" @click="submit()" style="margin-top: 30px"  type="danger">提交</van-button>

    </div>
</template>

<script>

import {axios as http} from '../apis/base'
import {Toast} from "vant";

export default {
    name: 'SubmitFly',
    data() {
        return {
            imgPath: '',
            imgUrl: '',
            isLoading: false,
            flyNumber:'',
            isLogin:false,
            isSubmit:false,
            show: false,
            bookingDate: '',
            minDate: new Date(2010, 0, 1),
            maxDate: new Date(2060, 0, 31),
        };
    },
    methods: {
        formatDate(date) {
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        },
        onConfirm(date) {
            this.show = false;
            this.bookingDate = this.formatDate(date);
        },
        submit(){
            if(!this.isLogin){
                Toast("亲，请登录...")
                this.$router.push("/login")
            }

            const order = {
                flyNumber:this.flyNumber,
                imgPath:this.imgPath,
                userId:localStorage.getItem('userId'),
                bookingDate:this.bookingDate
            }

            if(!this.imgPath){
                Toast("亲，请上传图片...")
                return
            }
            if(!this.flyNumber){
                Toast("亲，请填写航班号...")
                return
            }
            if(!this.bookingDate){
                Toast("亲，请选择日期...")
                return
            }


            this.isSubmit = Toast.loading({
                message: '提交中...',
                forbidClick: true,
            });
            this.$myPostHttp(this.$myUrl.submitFlyOrder,order).then(res=>{
                this.$router.push('/user')
            }).finally(() => {
                //this.isLoading = false
                this.isSubmit.close()
            })


        },

        afterRead(file) {
            this.isLoading = Toast.loading({
                message: '上传中...',
                forbidClick: true,
            });
            const formData = new FormData();
            formData.append("file", file.file);
            http.post(this.$myUrl.uploadTicket, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            }).then(res => {
                this.imgPath = res.records.filePath
                this.imgUrl = res.records.url
            }, error => {
                alert(error)
            }).finally(() => {
                //this.isLoading = false
                if (this.isLoading) this.isLoading.close()
            })

        },
    },
    mounted() {

        this.isLogin = localStorage.getItem('userId')!==undefined
    }
}

</script>

<style>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}

.van-uploader {
    margin: 0 auto;

}

</style>
